<template>
  <el-button type="primary">保存</el-button>
  <el-button @click="AddOpation">添加操作</el-button>
  <el-button @click="AddMonitor">观察点</el-button>

  <div id="exploratory">
    <div class="column">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="header">
            <el-button @click="AddOpation" type="warning">运行所有</el-button>
          </div>
          <el-divider border-style="dashed" style="width: 100%"/>

          <div id="opation" >
            <template v-for="o in exploratory.opation">
              <el-button link plain @click="Reboot(o)">{{ o.name }}</el-button>
            </template>
          </div>
        </el-col>

        <el-col :span="1">
          <el-divider border-style="dashed" direction="vertical" style="height: 100%"/>
        </el-col>

        <el-col :span="11">
          <div class="header">
          </div>
          <div id="runing" >
            <template v-for="o in exploratory.running">
              <el-button link plain>{{ o.name }}</el-button>
              <el-icon class="is-loading" >
                <Loading/>
              </el-icon>
            </template>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="column">
      <div class="header">
      </div>

      <div id="monitor">
          <template v-for="o in exploratory.monitor">
            <el-badge :value="o.fail" class="obutn item">
              <el-button link plain>{{ o.name }}</el-button>
              <el-icon class="is-loading">
                <Loading/>
              </el-icon>
            </el-badge>
          </template>
      </div>
    </div>

  </div>

    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="控制台" name="controller">
        <div>
          {{result}}
        </div>
      </el-tab-pane>
      <el-tab-pane label="操作日志" name="log">
        操作体质
      </el-tab-pane>
    </el-tabs>

</template>
<script setup lang="ts">
import {onMounted, ref,reactive} from 'vue'
import Monitor from "@/view/dashboard/monitor/monitor.vue";
const activeName = ref("controller")
const exploratory = reactive({
  "opation": [
    {name: "重启", type: "fault", moniotr: [{name:"检查是否上电"}]},
    {name: "下电", moniotr: [{name:"检查是否上电",fail:30}],recover:"恢复节点"},
    {name: "强制重启", moniotr: [{name:"检查是否上电",fail:3}]},
    {name: "闪断管理网",moniotr:[{name:"检查是否上电"}]},
    {name: "故障业务网"},
    {name: "故障后端网"},
    {name: "命令行"},
  ],
  "monitor": [],
  "running": [],
})
const Reboot = (opation) => {
  result.value = "reboot成功"
  AddRuning(opation)
  AddMonitor(opation.moniotr)
}

const AddOpation = () => {

}
const AddRuning = (opation) => {
  exploratory.running.push(opation)
}

const AddMonitor = async (monitor) => {
  if (monitor.length > 0){
    exploratory.monitor = exploratory.monitor.concat(monitor)
  }

}

onMounted(() => {

})


const result = ref("")


function generateRandomString(length) {
  let result = '';
  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

  for (let i = 0; i < length; i++) {
    result += characters.charAt(Math.floor(Math.random() * characters.length));
  }

  return result;
}
</script>


<style scoped>
#exploratory {
  display: flex;
  margin-top: 20px;
}

.column {
  height: 40vh;
  width: 40vw;
  border: #b7c4d1 1px solid;
  justify-content: space-between;
  border-radius: 10px;
  flex-grow: 10;
  flex-shrink: 1;
  flex-wrap: wrap;
  flex-basis: 25%;
  padding: 5px;
  margin-left: 20px;
  background-image: linear-gradient(to bottom right, #faf7f7, #e5f6c7);
}


#opation,#monitor,#runing {
  display: flex;
  justify-content: flex-start;
  flex-grow: 10;
  flex-shrink: 1;
  flex-wrap: wrap;
  flex-basis: 25%;

}
.obutn {
  padding: 0 10px;
}

.obutn:hover {
  color: green !important;
  cursor: pointer;
}

.item {
  margin-right: 10px;
}

.result {
  height: 40vh;
  width: 80vw;
  border: #b7c4d1 1px solid;

  border-radius: 10px;
  padding: 5px;
  margin-left: 20px;
}

.el-divider {
  margin:4px;
}
.el-row {
  height: 100%;
}
:deep(.el-tabs__header){
  margin-bottom: 0;
}
:deep(.el-tabs__content){
  width: 89vw;
  height: 42vh;
  border-radius: 8px;
  border-left: #b7c4d1 2px solid;
  border-right: #b7c4d1 2px solid;
  overflow-x: auto;
  overflow-y: hidden;
  color: #3d3838;
  padding: 8px;
  background-color: #eef6ed;
}
</style>